<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/google-map/google-map.html">
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../../bower_components/paper-input/paper-input.html">
<link rel="import" href="../../bower_components/paper-material/paper-material.html">

<script rel="import" src="SubTileZoomMapType.js"></script>

<link rel="import" href="../forest_controls/forest-controls.html">
<link rel="import" href="../forest_layer_panel/forest-layer-panel.html">
<link rel="import" href="../forest_legend/forest-legend.html">
<link rel="import" href="../forest_search_panel/forest-search-panel.html">

<dom-module id="forest-map">
  <template>
    <style>
      google-map {
        @apply --layout-fit;
      }

      forest-legend,
      forest-controls,
      forest-layer-panel,
      forest-search-panel {
        position: absolute;
        left: 0px;
        border-radius: 0 2px 0 2px;
      }

      forest-controls,
      forest-layer-panel,
      forest-search-panel {
        top: 100px;
      }

      forest-legend {
        bottom: 50px;
      }

      :host[narrow-viewport] forest-controls {
        display: none;
      }

      .side-drawer ::content .content {
        padding: 20px;
        padding-top: 10px;
      }

      .side-drawer ::content .header {
        padding-top: 10px;
        padding-left: 5px;
      }
    </style>
    <google-map map="{{gMap_}}"
                latitude="{{lat_}}"
                longitude="{{lon_}}"
                zoom="{{zoom_}}"
                map-type="{{baseLayerId_}}"
                on-google-map-ready="handleGoogleMapReady_">
    </google-map>

    <forest-controls
        on-search-tap="openSearchPanel_"
        on-layers-tap="openLayersPanel_">
    </forest-controls>
    <forest-layer-panel
        class="side-drawer"
        selected-forest-layer="{{forestLayer_}}"
        selected-base-layer-id="{{baseLayerId_}}">>
    </forest-layer-panel>
    <forest-search-panel class="side-drawer" on-result-selected="handleSearchDone_">
    </forest-search-panel>

    <forest-legend forest-layer="[[forestLayer_]]"></forest-legend>
  </template>
  <script src="forest-map.js"></script>
</dom-module>
